<script setup>
// const LoginData=ref({
//
// })

// //控制注册界面的显示，重置密码界面的显示
// let isRegister = ref(false)
// let isReset = ref(false)
import {ref} from "vue";

let isUserLogin=ref(true);
let isAdminLogin=ref(false);
</script>

<template>
  <div id="showLoginForm" >
    <div class="loginContent">
      <div class="loginTitle">
        <a id="btn1" class="btn" href="/admin/login" role="button">用户登录</a>
        <a class="btn" href="/admin/login2" role="button">管理员登录</a>
      </div>
      <div v-if="isUserLogin" class="loginForm">
        <div class="loginFormItem">
          <label for="username" class="loginFormLabel">
            <i class="fa-solid fa-user"></i>
          </label>
          <input type="text" class="loginFormInput" name="username" id="username" placeholder="Please enter username">
        </div>

        <div class="loginFormItem">
          <label for="password" class="loginFormLabel">
            <i class="fa-solid fa-lock"></i>
          </label>
          <input type="password" class="loginFormInput" name="password" id="password" placeholder="Please enter password">
        </div>

        <div class="loginFormItem">
          <label for="code" class="loginFormLabel">
            <i class="fa-solid fa-shield-halved"></i>
          </label>
        </div>
        <div class="loginFormItem">
          <button >Login</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
#showLoginForm{
  margin-top: 10%;
  width:25%;
  margin-left: 35%;
}
.loginContent {
  position: relative;
  margin: 60px auto;
  width: 90%;
  height: 90%;
  border: 2px solid rgb(64,158,179);
  padding: 10px 20px;
  border-radius: 30px;
}
.loginContent .loginTitle{
  padding: 20px 0;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 2px solid rgb(64,158,179);

}
.loginContent .loginTitle .btn{
  color: gray;
  text-decoration: none;
  padding: 5px 20px;
  font-size: 25px;
  margin: 0px;
  font-weight: bold;
}
.loginContent .loginTitle .btn:hover{
  color: green;
  text-decoration: none;
}
.loginFormItem{
  margin-top: 15px;

}

.loginContent input{
  border-radius: 5px;
  width:95%;
  height: 30px;
  border: solid 1px gray;
}
.loginFormItem button{
  width: 97%;
  height: 30px;
  color: black;
  font-weight: bold;
  background-color: rgb(64,158,179);
  border: none;
  border-radius: 5px;
}
.loginForm{
  margin-bottom: 30px;
}
</style>